Creating Web Pages


Starting From a New Page

To start a new web page, use one of the methods described below. Once you've started a page, you can add and edit text just as you would in a word processor.

To start from a blank page:

To start from a template:

  1. Open the File menu and choose New; then choose Page From Template.
  2. In the New Page from Template dialog box, select a template by doing one of the following:
  3. Open the File menu and choose Edit Page to use the template as the basis for a new document.

To start from Netscape's Page wizard:

  1. From the File menu, choose New and then choose Page From Wizard.
  2. When the wizard opens, follow the instructions to create a page that you can open in Composer.

Important: To access the Netscape Template web site and Netscape Page Wizard, you must be connected to the Internet.

To start from the page (or frame) you're currently browsing:

To start from an page already created in Composer:

  1. Choose Page Composer from the Communicator menu.
  2. Open the File menu and choose Open Page (Open Page...in Composer on Mac OS).
  3. Type the path and name of the file you want to use, or click Choose File to search for the file.

  4. Click Composer.
  5. Click Open. A Composer window opens containing the specified file.

Checking the Spelling (Windows and Unix only)

  1. Select a word or part of a document, or don't select anything to check the entire document.

  2. Click Check Spelling.

Use the Check Spelling dialog box to correct misspellings and to edit or add words to the current dictionary. Click Stop when you are done.

Word field and Suggestions list

The Word field displays the misspelled word. Click a word in the Suggestions list or type a correction, and then click Replace or Replace All.

Check

Click to check the spelling of any word you type in the Word field.

Language pop-up menu

To use a different spelling dictionary, click this pop-up menu and choose from the list.

Ignore and Ignore All

Click to continue checking without changing the word (or all occurrences of the word).

Learn

Click to add the word to the dictionary. If there are several words in the Word field, each is added the dictionary.

Edit Dictionary

Displays a dialog box to add, replace, or remove words from the dictionary.


About the Edit Dictionary Dialog Box (Windows only)

Use the Edit Dictionary dialog box to add, replace, and remove words.

New Word field

Type the word you want to add to the dictionary; then click Add.

Word field

Select a word, then:


Saving and Browsing Your New Page

To save a page:

Note: To save links and images with a page use the Publishing Preferences dialog box.

To view your page in a Navigator (browser) window:


Formatting Your Web Page


Formatting a Paragraph

  1. Highlight the paragraphs you want to format.
  2. Open the Format menu and choose Character Properties; then click the Paragraph tab. All the options are explained below.

Paragraph style drop-down menu

Heading 1-6: Choose "1" for your main heading, "2" for the next level, and so forth.

Address: This format is used for a web page "signature" that indicates the author of the page and the person to contact for more information, as in this example:

Carlos Goldstein@netscape.com

You might want to include the date and copyright notice. This format usually appears at the bottom of the web page under a horizontal line.

Formatted: This is useful for elements such as code examples, tables, and mail messages that you want displayed in a fixed-width font, as in this example:

alert("Hello!")

Most browsers remove extra spaces, tabs, and paragraph returns in your text. However, text that uses the Formatted style is displayed with the white space intact.

List Item: Choose this option and "List" under Additional Style to create a list.

Desc. (Description) Title and Text: Use the Description Title and Text formats for glossaries and similar lists, as in this example:

Browser

A program that helps you to view the contents of a file, folder, or web page.

Additional Style

Click to display additional attributes for the paragraph style you've selected.

Block Quote: Choose this option to indent text.

List: Choose this option and "List Item" under Paragraph Style to create a list.

List box

If you select List under Additional Style, choose the type of list you want.

Unnumbered: Items are preceded by a bullet or other symbol.

Numbered: Items are preceded by numbers or letters.

Directory: Short items appear horizontally in columns, as in a DOS directory listing.

Menu: Short items appear without bullets or numbers.

Description: Sometimes called a Definition or Glossary list. Items are indented.

Note: Navigator does not display Directory and Menu styles (it displays these styles as normal text), but other browsers may display them.

Number Style/Bullet Style

(For bulleted and numbered lists) Select numbering style or specify the type of bullet.

Starting number

(For numbered lists) Type the beginning number for the list.

Alignment

Specify whether to align the selected paragraph at the left, right, or center of the page.


Changing Text Color, Style, and Font

  1. Highlight the text you want to format.
  2. Open the Format menu and choose Character Properties; then click the Character tab. All the options are explained below.

Font Face

Click to select the font you want. To have your page use fonts specified by a reader, select Variable Width or Fixed Width.

Font Size

Click to select the size of the specified font.

In the list of font sizes, you'll see a menu of point sizes (8, 9, 10, 12, 14 and so forth), the relative HTML font scale (-2 to +4), or both. You can specify which type of menu you want in the General panel of the Composer Preferences dialog box (Windows only).

Color

Click Use Color, then click the color button to choose the color of the selected characters. The color button is the rectangle to the right of the Use Color button. If the current text color is black, then the color button is black.

Click Don't Change if the selected text contains more than one color.

Note: You can specify default text color in the Colors and Background panel of the Page Colors and Properties (Page Properties on Mac OS) dialog box.

Other Colors

Click the color button in the Color section to display a colors dialog box. Then click Other. You'll see a dialog box where you can choose a custom color.

Style

Select a style, such as italic, bold, underline, or nonbreaking, for the selected characters.

Remove Style Settings

Resets any style checkboxes you have selected to unselected or blank.

Remove All Settings

Resets all settings you have made in this dialog box to unselected or blank.

To preview your settings, click Apply. Then click Close to accept the changes. To accept the changes without previewing, click OK.


Inserting Horizontal Lines

  1. Click the location in the Composer window where you want the line to appear.
  2. Open the Insert menu and choose Horizontal Line.
  3. To specify the line's height, width, alignment, and shading, double-click on the line.

Inserting Raw HTML

If you understand HTML, you can insert HTML form tags, JavaScript, and plug-in code that aren't available from Composer's Format menu. Although the Composer does not display these objects, it inserts special HTML tag icons to show where they are.

To insert HTML tags:

  1. Click where you want to insert the tag.
  2. Open the Insert menu and choose HTML Tag.
  3. Type an HTML tag. The tag will be inserted in your document at the current cursor location. Type only one tag at a time (see example, below).
  4. Click Verify to have Composer check the HTML you've typed.
  5. Composer checks that you have both opening and closing brackets < > around your HTML, and quotation marks around any attribute text.

  6. Click OK.

Example:


<applet code="HelloWorld.class" width=100 height=30>
<param name=text value="Hello World!">
</applet>

In this example, you would type the first line in the dialog box and click OK. Then you would open the HTML Tag dialog box again, type the second line, and click OK. You repeat this procedure for each tag you want to add to your page.

To edit a tag:

About the Extra HTML Tag Dialog Box

The Extra HTML dialog box works just like the HTML Tag Dialog Box (above). When you're creating tables and links, you can use the Extra HTML dialog box to enter additional HTML attributes or JavaScript for the tag you are working with.


Adding Tables to Your Web Page


Inserting a Table

  1. Place the insertion point where you want the table to appear in your document.
  2. Choose Table from the Insert menu.
  3. Use the New Table Properties dialog box to set up your table.
  4. Click OK.

Adding and Deleting Rows, Columns, and Cells

To add to your table:

  1. Click where you want to add space.
  2. Open the Insert menu and choose Table; then choose Row, Column, or Cell.

To delete:

  1. Click in a row, column, or cell.
  2. Open the Edit menu and choose Delete Table; then choose Row, Column, or Cell.

Changing a Table

You can change a table's caption or border, or the width, height, alignment, color, or background of a table or parts of a table.

  1. To change an entire table, click anywhere inside it; to change a specific row or cell click inside the row or cell.
  2. Open the Format menu and choose Table Properties (Table Info in Mac OS).
  3. Click the Table, Row, or Cell tab.
  4. Use the Table Properties dialog box to make your changes.
  5. Click OK.

The settings you choose in the Table Properties dialog box always override the settings you chose when you first created the table.


Using the Table Properties Dialog Box

Use the New Table Properties dialog box and the Table Properties dialog box to set or change a table's characteristics. All the fields are explained below.

To create new tables, use the New Table Properties dialog box:

To change an existing table, use the Table Properties dialog box:

  1. Click anywhere inside a table, row, or cell.
  2. Open the Format menu and choose Table Properties; then click the Table, Row, or Cell tab.

Number of rows/Number of columns

Enter the number of rows and columns you want. This option is available only when you are creating a new table. You can also add rows and columns to an existing table.

Table Alignment

Aligns the table within the document.

Horizontal Alignment and Vertical Alignment

Aligns the text within each row or cell. Default leaves the alignment as it was when the table was created.

Include caption

Inserts space for a caption, either above or below the table.

Border line width

Enter a number for the size, in pixels, of the border lines around cells (table items). Enter 0 for no border. Note: Composer displays a zero (0) border as dotted outlines; no borders appear when the page is viewed through a browser.

Cell spacing

Enter a number for the space, in pixels, between cells.

Cell padding

Enter a number for the padding, in pixels, within each cell. This sets the margins of each cell.

Table width

Enter a number for the width of the table. Choose "% of window" or "pixels." If you specify width as a percentage, the table width changes whenever the window width changes.

Table min. height

Enter a number for the minimum height of the table. This is the smallest height the table can have. If you add text to the table, the table is resized to fit. Choose "% of window" or "pixels." If you specify height as a percentage, the table height changes whenever the window height changes.

Note: If you are inserting a table within a table, the minimum width and height of the nested table can be percentages of the parent cell.

Equal column widths

Makes all cells the same width. Deselect this if you want to size each cell individually.

Cell width

Enter a number for the width of the cell. Choose "% of table" or "pixels." If you specify width as a percentage, the cell width changes whenever the table width changes.

Cell min. height

Enter a number for the minimum height of the cell. This is the smallest height the cell can have. If you add text to the cell, it is resized to fit. Choose "% of table" or "pixels." If you specify height as a percentage, the cell height changes whenever the table height changes.

Note: If you are modifying a table that's within a cell, the minimum width and height of the nested table can be percentages of the parent cell.

Cell spans

Type numbers in the rows box and columns box to specify whether you want the selected cell to span more than one column or row.

Header style

Centers the text in the cell and sets its style to bold.

Nonbreaking

Keeps the text from wrapping to the next line. Text will wrap to the next line ony if you insert a paragraph break.

Use Color

Lets you choose a background color for the table, row, or cell. Click Other, at the bottom of the color palette, to define a custom color.

Use Image

Lets you use an image as the table, row, or cell background. Type the location and filename of the image you want to use. Click Choose Image to find an image on your hard disk or network.

Leave image at the original location

If you use a background image, Composer makes a copy of the image and places it in the same directory (folder) as your page. If you don't want a copy made, click this option.

Extra HTML

Displays a dialog box where users familiar with HTML and JavaScript can add tags that further define the table.

To preview your settings, click Apply; and then click Close to accept the changes. To accept the changes without previewing, click OK.


Moving, Copying, and Deleting Tables

  1. Click in the table, then open the Edit menu and choose Select Table.
  2. To copy or move: Use the Edit menu's cut, copy, and paste options.
  3. To delete: Choose Delete Table from the Edit menu.

Adding Pictures (Images) to Your Web Page


Inserting an Image

You can insert GIF and JPEG images into your web page.

  1. Click where you want the image to appear in your document.
  2. Open the Insert menu and choose Image.
  3. Specify the image file and adjust settings in the Images Properties dialog box. The dialog box's options are explained below.

Tips:


About the Images Properties Dialog Box

Use this dialog box to insert a new image or modify an existing image's options, such as text wrapping, height and width, and spacing.

Image location

Type the name or location of the image file you want to insert or modify. Click Choose File to search for an image file on your hard disk or network.

Edit Image

Click to edit the image using the external editor you specified in the Composer Preferences General dialog box. If you haven't specified an image editor, you will be prompted to do so.

Leave image at the original location

Normally Composer makes a copy of the image and places it in the same directory (folder) as your page. If you don't want a copy made, click this option.

Important: If you move an image file from the specified location, it will no longer appear on your web page.

Use as background (Page Background on Mac OS)

Click to use the image as a background for your entire page.

Text alignment and wrapping around images ("xyz" buttons)

Windows: Click a button to indicate how you want text postioned next to the image.

Mac OS: From the pop-up menu next to the words "To see wrapped text," choose how you want text postioned next to the image.

To see alignment changes you've made, view your page in a browser window. The Composer window does not show what the browser user will see.

Dimensions

Specify the height and width, in pixels, of the image.

Constrain

Click to maintain the size settings of the image if you move it within your document.

Original Size

Click to undo any changes you've made to dimensions.

Space around image

Specify the amount of space on the right and left, and at the top and bottom of the image. You can also put a solid black border around the image and specify its width in pixels. Specify 0 for no border.

Remove Image Map (Windows only)

Click to remove all link regions from the image. An image map is a type of image that contains links to different locations within the same image. This button is dimmed if your image contains no links.

Alt. Text/LowRes (Alternative Representations on Mac OS)

Windows: Click the Alt. Text/LowRes button to display the Alternate Image Properties dialog box, where you specify whether to display text or a low-resolution image in place of the original image.

Mac OS: In the Image field enter the name of a lower resolution image to display while the main image is loading. Click Choose File to browse for the file location. In the Alternate text field type a message to display in place of the image, for example, a caption or brief description of the image.

It is a good practice to specify alternative text for readers who use text-only web browsers or who have graphics turned off. Otherwise, your readers might see placeholder images. You can also specify alternative text, or a low-resolution image, to quickly appear while the reader is waiting for your high-resolution image to load.

Extra HTML

Displays a dialog box where users familiar with HTML and JavaScript can add tags that manipulate the image.

To preview your settings, click Apply. To accept the changes, click OK.


About the Alternate Image Properties Dialog Box (Windows only)

Use this dialog box to add alternative text for an image and specify a low-resolution image to use in its place.

Alternate text

Type a message to display in place of the image, for example, a caption or brief description of the image.

It is a good practice to specify alternative text for readers who use text-only web browsers or who have graphics turned off. Otherwise, your readers might see placeholder images. You can also specify alternative text, or a low-resolution image, that appears while the reader is waiting for your high-resolution image to load.

Low-resolution image

Enter the name of a lower resolution image to display while the main image is loading. Click Choose File to browse for the file location.

Edit Image

Click to edit the image using the external editor you specified in the Composer Preferences General dialog box. If you haven't specified an image editor, you will be prompted to do so.


About the Image Conversion Dialog Box (Windows only)

Use this dialog box when you need to import a bitmap graphics file into your page. Composer converts the file to the JPEG format, and lets you select the quality of pixel display (high, medium, or low).


Setting Page Properties


Setting Page Location, Title, and Author

The information you specify in the Page Properties dialog box helps readers locate your document on the Web.

Location

Shows the location of the current document on your computer's disk. You cannot change this field.

Title

Type the text you want to appear in the window title when someone views the page through a browser. This is how most web search tools locate web pages, so choose a title that conveys what your page is about.

Author

Type the name of the person who created the document. This information is helpful to readers who find your document by using a web search tool.

Description

Briefly describe the document's contents.

Other Attributes

The keywords you type here help searching services lead users to your document on the Web. Type the category name (obtained from a catalog server) you think best applies to your document. Classification names are another method used by searching services to locate documents.

To preview your settings, click Apply; then click Close to accept the changes. To accept the changes without previewing, click OK.


Setting Page Colors and Backgrounds

The Colors and Background part of the Page Properties dialog box lets you set a background color or image for your page, and choose colors for links.

Use viewer's browser colors

The viewer's color preferences (specified in the General preferences panel) will be used.

Use custom colors

Lets you specify color for text, links, and background. Click the button to display the color palette and select the color you want.

Color Schemes

Lets you select a scheme from the list.

Use image

Click to use an image as the page background. Type the name of an image file. If you're not sure of the filename or file location, click Choose File to find the image file on your hard disk or network.

Background images are tiled and override background color.

Leave image at the original location

Normally Composer makes a copy of the image and places it in the same directory (folder) as your page. If you don't want a copy made, click this option.

Save these settings for new pages

Click this option if you want your settings to apply to any new web pages you create.

To preview your settings, click Apply. To accept the changes, click OK.


Specifying Meta Tags

The Meta Tags Dialog Box displays optional information that your Internet service provider might want you to include in your document. This information doesn't actually appear in the document when edited or browsed--only in the source HTML. Contact your provider for more information.


Linking and Publishing Your Page


Linking Within the Same Page

To link within the same page, create a target, then create a link that points to the target.

  1. Put the cursor at the beginning of a line where you want to create a target, or select some text at the beginning of a line.
  2. Open the Insert menu and choose Target.
  3. Type a name for the target in the edit box (up to 30 characters). If you selected some text in step 1, this box already contains a name.
  4. Click OK. A Target icon (visible only in the Composer window) appears in your document to mark the target's location.
  5. Note: Targets are also called anchors.

  6. Put the cursor on the text or image that you want to link to the target.
  7. Open the Insert menu and choose Link.
  8. Open the File menu and choose Browse Page; then click the link you just created.

Linking to Other Pages

You can link to local pages on your own computer or on your workplace's network, or to remote pages somewhere on the Internet.

You can quickly create a link by dragging and dropping from other windows (Mac OS and Windows only). For example, you can highlight a link from a web page, bookmark, or mail and news window and drag and drop it on your page.

You can also create a link using the Link Properties dialog box:

  1. Select the text or image you want to link to another page.
  2. Open the Insert menu and choose Link.
  3. Use the Link Properties dialog box to set up the link. The dialog box is explained below.

About the Link Properties Dialog Box

Use this dialog box to insert a new link or modify an existing link.

Link source

Enter the text you want link to another page or target. If you've already highlighted an image or text, you see it here.

Link to page location or local file

Type the local path and filename or remote URL of the page you want to link to. If you're not sure of the path and filename or a local file, click Browse to find it on your hard disk or network.

Show targets in

Click Current File to see the named targets in the page you're currently editing. Click Selected File to see named targets in the file you specified under "Link to page location or file," above.

Select a named target (optional)

The targets you see listed here depend on what you chose under "Show targets in," above. Targets (also known as anchors) are specific locations in a page. (You can create targets.)

If you want to link to a target, select one from the list.

Remove Link

Click to unlink the selected linked text. If the current selection contains more than one link, an alert box appears asking you whether to remove all links.

Extra HTML

Displays a dialog box where users familiar with HTML and JavaScript can add tags that further define the table.

To preview your settings, click Apply. To accept the changes, click OK.


Linking to Images

You can make images behave as links in your pages. When the user clicks a linked image, the browser window displays the page that the image is linked to.

  1. Click to highlight an image on your page.
  2. Open the Insert menu and choose Link.
  3. Use the Link Properties dialog box to set up the link.

Tip: Dragging a linked image from the Navigator window into a Composer window copies both the image and the link.


Putting Your Page on the Web

Use the Publish Files dialog box to publish your pages on the Web. To view this dialog box, open the File menu and choose Publish.

Page Title

If you have already created a page, this field is filled in. If not, enter the text that appears in the window title when the page is viewed through a browser. To be sure readers can locate your page easily, enter a useful title that conveys what your page is all about.

HTML Filename

If you have already created and saved a page, this field is filled in. If not, enter a filename for the current page you want to publish. The filename must have an .htm or .html extension.

HTTP or FTP Location to publish to

Enter the location of the remote site where you want to publish your web page. You may need to contact your Internet service provider to find out what to type here.

For example, if your service provider is America Online, the URL in this box might look something like this: ftp://ftp.aol.com/docs/. Or, if a web server protocol is used, you might see something like this: http://commercialweb.com/docs/.

Composer keeps track of locations you type here, so in the future you can select from a list of your remote locations. Click Use Default Location to use the location you've specified in the Publish panel of the Composer Preferences dialog box.

User name

Type the name you use when you access the network where your web pages will reside.

Password

Type the password for your user name.

Save Password

Click to save your password so that you don't need to type it each time you publish your web pages.

Files associated with this page

Click to display all of the files referenced by the current document. Then select the files you want to publish along with the document. Click Select None or Select All to quickly select and deselect files in the list.

All files in page's folder

Click to display all of the files in the current page's directory. Then select the files you want to publish along with the page. Click Select None or Select All to quickly select and deselect files in the list.

Warning: If a file on the remote server you're publishing to has the same filename as one you're uploading, the newly uploaded file will replace the existing one. You will not be asked to confirm the action.


Adding New Functions to Composer


Installing Plug-Ins

To add new functionality to Composer, you can download plug-in tools that Netscape offers.

  1. Use Navigator to go to Netscape's Download site at this URL:

    http://home.netscape.com/plugins/

  2. Select the desired plug-in ZIP file.
  3. Save the plug-in ZIP file:
  4. Restart Netscape Communicator.

Your new plug-in will appear in the Tools menu of the Composer window.


Setting Composer Preferences


Composer Preferences -- General

To view the Composer Preferences dialog box, open the Edit menu and choose Preferences, then click the Composer category.

Author name

Enter the name of your pages' author. This information is helpful to readers who find your document by using a web search tool.

Automatically save page every___ minutes

Click to have Composer automatically save your document, and then specify how often (in minutes).

External Editors

Enter the path and filename of the text and image editors of your choice. For example, if you want to use Notepad to edit the actual HTML source, type C:\WINDOWS\NOTEPAD.EXE. Then when you choose HTML Source from the Edit menu, Notepad starts with the current document displayed. If you're not sure of the filename, click Choose to find the application.

Note: When you edit HTML source using an external editor, first save your changes in the editor and then choose Reload from the View menu to see your changes in Composer.

Template for New Page (Mac OS only)

Enter the template's location or click Choose Local File to browse for the name of the file you want to use as a template.

Font Size Mode (Windows only)

Select how Composer will display font sizes:


Composer Preferences -- Publish

To view the Publishing Preferences dialog box, open the Edit menu and choose Preferences. If necessary, click the plus sign (or triangle) next to the Composer category in the left pane. Select Publishing.

Maintain links

Click to make your links relative. Relative links (with partial pathnames) are easier to maintain and lead to fewer broken links than absolute ones (with full pathnames).

Keep images with page

Although images appear in pages, the images are saved in separate files. Select this option to save a copy of each image file in the same location as the page. If you deselect this option, only the HTML page is saved, not the image files.

Netscape recommends that you leave this option selected.

Default publishing location

FTP: Enter the default location where you want to upload your web pages using the File Transfer Protocol. You may need to contact your Internet service provider to find out what to type here. For example, if your service provider is America Online, the URL in this box might look something like this: ftp://ftp.aol.com/docs/.

HTTP: Enter the default location where you want to upload your web pages using the web server protocol. If you are not running your own web server, you may need to contact your Internet service provider to find out what to type here. For example, the URL in this box might look something like this: http://websurf.com/docs/.

If publishing to a FTP site, enter the HTTP address to browse to. Enter the default location of your published web pages. For example, if you publish your web pages to http://aol.com/docs/, you should type this URL in the box.


September 24, 1998
Copyright © 1994-1998 Netscape Communications Corporation.